<template>
	<view>
		<u-navbar :border-bottom='false' back-icon-size='48' title="申请提现"></u-navbar>
		<view class="main">
			<view class="lable">
				提现金额
			</view>
			<view class="inputBox">
				<text>¥</text>
				<input type="text" placeholder="请输入提现金额" v-model="money" />
			</view>
			<view class="lable">
				提现到
			</view>
			<view class="withdrawBox">
				<view class="withdraw-li" v-for="(pay,pays) in payList" :key='pays'>
					<image class="icon" :src="pay.icon" mode=""></image>
					<view class="tit">
						{{pay.title}}
					</view>
					<u-checkbox shape="circle" v-model="pay.checked" @change="changeFn" :disabled='disabled'
						:name="pay.title"></u-checkbox>
				</view>
				<view class="withdraw-li" style="border-bottom: none;">
					<image class="icon" src="../../../static/imgs/yinlian.png" mode=""></image>
					<view class="tit">
						银行卡
					</view>
					<view class="next" @click="navTo('../bankCard/add')" v-if="!bankList.length">
						<text>去添加</text>
						<u-icon name="arrow-right" color="#999999" size="32"></u-icon>
					</view>
					<view class="next" @click="showCard=!showCard" v-else>
						<u-icon name="arrow-down" color="#999999" size="32"></u-icon>
					</view>
				</view>
				<view class="card-ul" v-if="showCard">
					<view class="card-li" v-for="(bank,index) in bankList" :key='index'>
						<image src="../../../static/imgs/yinlian.png" mode=""></image>
						<view class="tit">
							{{bank.bank_name}}
						</view>
						<u-checkbox shape="circle" v-model="bank.checked" :name="bank.bank_number" @change="bankChange">
						</u-checkbox>
					</view>
					<view class="moreCrad" @click="navTo('../bankCard/add')">
						<u-icon name="plus-circle" color="#3587F7" size="32"></u-icon><text
							style="margin-left: 8rpx;">添加银行卡</text>
					</view>
				</view>
			</view>
			<view class="sunBtn" @click="submiBtn">
				提现
			</view>
			<view class="tips">
				<view class="p">
					* 单日提现不超过1次
				</view>
				<view class="p">
					* 银行卡提现：单笔提现金额不低于100且不超过10000.3-7个工作日完成审批和提款，请确保提现申请信息正确。
				</view>
				<view class="p">
					* 微信提现：单笔限额100-5000，仅限APP上绑定微信操作提现.
				</view>
			</view>
		</view>
		<u-modal v-model="showTips" :content="content" :show-title='false' show-cancel-button @confirm="confirmFn">
		</u-modal>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				content: '暂未绑定微信,无法使用微信提现,是否前往绑定',
				showTips: false,
				disabled: false,
				money: '', //提现金额
				showCard: false,
				bankList: [],
				payList: [{
						icon: '../../../static/imgs/weixinzf.png',
						title: '微信',
						checked: false
					},
					// {
					// 	icon: '../../../static/imgs/zhifubaozf.png',
					// 	title: '支付宝',
					// 	checked: false
					// },
					// {
					// 	icon: '../../../static/imgs/wodeqnzf.png',
					// 	title: '我的钱包',
					// 	checked: false
					// }
				],
				cardId: '',
				type: '', // 类型
				isWhat: false,
				openid: ''
			}
		},
		onShow() {
			this.getMyb_card()
			this.getInfo()
		},
		methods: {
			confirmFn() {
				uni.navigateTo({
					url: '../editInfo/editInfo'
				})
			},
			// 判断是否绑定微信
			async getInfo() {
				let res = await myRequest.getUserInfo()
				if (res.status) {
					if (res.data.openid && res.data.unionid != 'null' && res.data.unionid != '') {
						this.openid = res.data.openid
						this.disabled = true
					} else {
						this.disabled = true
						this.showTips = true
					}
				}
			},
			// 绑定微信提现
			async bangWx() {
				let {
					openid
				} = this
				let res = await myRequest.addBankcard({
					type: '1',
					bank_number: openid
				})
			},
			// 提现
			async submiBtn() {
				let {
					money,
					cardId,
					type
				} = this
				if (!money) {
					uni.showToast({
						title: '请输入提现金额',
						icon: 'none'
					})
					return
				}
				if (cardId) {
					// 银行卡
					let res = await myRequest.moneyTx({
						card_id: cardId,
						amount: money,
						type: type
					})
					if (res.status) {
						uni.showToast({
							title: '发起成功'
						})
					}
				} else {
					this.wechat()
				}
			},
			// 微信提现
			async wechat() {
				let {
					money,
					type
				} = this
				// console.log(money + type)
				let res = await myRequest.weixinTx({
					amount: this.money,
					type: this.type
				})
				if (res.status) {
					// console.log(res)
					uni.showToast({
						title: '微信提现成功'
					})
				}
			},

			changeFn(e) {
				if (e.value == true) {
					this.bangWx()
				}

				this.bankList.forEach(item => {
					item.checked = false
				})
				this.payList.forEach(item => {
					if (item.title == e.name) {
						item.checked = true
					} else {
						item.checked = false
					}
				})
			},
			bankChange(e) {
				// 处理之前已选择
				this.payList.forEach(item => {
					item.checked = false
				})
				this.bankList.forEach(item => {
					if (item.bank_number == e.name) {
						item.checked = true
						this.cardId = item.card_id
					} else {
						item.checked = false
					}
				})

			},
			async getMyb_card() {
				let res = await myRequest.getBankcard({
					page: '1',
					num: '100'
				})
				if (res.status) {
					res.data.forEach(item => {
						item.checked = false
					})
					this.bankList = res.data
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 0 20rpx;

		.lable {
			height: 100rpx;
			text-align: left;
			line-height: 100rpx;
			font-size: 32rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #333333;
		}

		.inputBox {
			width: 694rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			padding: 0 38rpx;

			input {
				text-indent: 12rpx;
			}
		}

		.withdrawBox {
			width: 710rpx;
			height: auto;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 20rpx;

			.withdraw-li {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #F2F2F7;

				.icon {
					width: 48rpx;
					height: 48rpx;
				}

				.tit {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-left: 20rpx;
				}

				.next {
					margin-left: auto;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;

					text {
						margin-right: 10rpx;
					}
				}
			}

			.card-ul {
				padding-bottom: 16rpx;

				.card-li {
					width: 100%;
					height: 100rpx;
					display: flex;
					align-items: center;

					image {
						width: 48rpx;
						height: 48rpx;
					}

					.tit {
						margin-left: 10rpx;
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #333333;
					}
				}

				.moreCrad {
					width: 100%;
					height: 66rpx;
					line-height: 66rpx;
					text-align: center;
					background: #F2F2F7;
					border-radius: 8rpx;
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #3587F7;
				}
			}
		}

		.sunBtn {
			margin: 100rpx auto 0;
			width: 660rpx;
			height: 100rpx;
			background: linear-gradient(180deg, #FB8703 0%, #F7270C 100%);
			border-radius: 16rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 34rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #FFFFFF;
		}

		.tips {
			margin-top: 100rpx;

			.p {
				font-size: 24rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #999999;
				line-height: 48rpx;
			}
		}
	}

	/deep/ .u-checkbox {
		margin-left: auto;
	}

	/deep/ .u-checkbox__label {
		margin-left: 0;
		margin-right: 0;
	}
</style>
